

import { useState, useEffect, useRef, memo } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { message } from 'antd'
import timePng from '../../assets/home/reload-time.png'
import bus from '../../utils/eventBus'
import './index.scss'
const CountDown = () => {
    const { name, userType } = useSelector((state: any) => state.userReducer.userInfo)
    const navigate = useNavigate()
    const [isShow, setIsShow] = useState<boolean>(false)
    const [countDownNum, setCountDownNum] = useState<number>(0)
    const timer = useRef<any>(null)
    const countDownOpen = useRef<boolean>(false)
    const noChaneCount = useRef<number>(0)
    const setItemCountDown = () => {
        setIsShow((origin: boolean) => {
            if (!origin) {
                startCountDownNum();
            }
            return origin
        })
    }
    const windowClick = () => {
        setIsShow((origin: boolean) => {
            if (origin) {
                startCountDownNum();
            }
            return origin
        })
    }
    const windowScroll = () => {
        setIsShow((origin: boolean) => {
            if (origin) {
                startCountDownNum();
            }
            return origin
        })
    }
    const resetCountDownNum = () => {
        setIsShow((origin: boolean) => {
            if (!origin) {
                startCountDownNum();
            }
            return origin
        })
    }
    const closeCountDown = () => {
        setIsShow(false)
        stopCountDown();
    }
    const stopCountDown = () => {
        clearInterval(timer.current);
    }
    const startCountDownNum = (res?: number) => {
        if (!countDownOpen.current && !res) return;
        if (res) {
            noChaneCount.current = res;
        }
        setCountDownNum(noChaneCount.current)
        startFnCount();
    }
    const startFnCount = () => {
        setIsShow(true)
        clearInterval(timer.current);
        timer.current = null;
        timer.current = setInterval(() => {
            setCountDownNum((origin: number) => {
                if (origin - 1 <= 0) {
                    navigate('/login')
                    window.chromePro.tryLoginOut();
                    window.chromePro.addOpLog(
                        JSON.stringify({
                            oper: name,
                            userType,
                            opType: "退出",
                            opDetail: "倒计时退出！",
                            status: 1,
                        })
                    );
                    clearInterval(timer.current);
                    timer.current = null;
                }
                return origin - 1
            })
        }, 1000);
    }
    const getConfigFinished = (data: any) => {
        if (data.code === 200) {
            countDownOpen.current = data.countDownOpen;
            if (data.countDownOpen) {
                setIsShow(true)
                setCountDownNum(data.countDownNum)
                noChaneCount.current = data.countDownNum;
                startCountDownNum();
            } else {
                setIsShow(false)
            }
        } else {
            setIsShow(false)
            message.error(data.msg);
        }
    }
    useEffect(() => {
        window.chromePro.getConfig();
        bus.addListener("getConfigFinished", getConfigFinished);
        bus.addListener("startCountDownNum", startCountDownNum);
        bus.addListener("resetCountDownNum", resetCountDownNum);
        bus.addListener("setItemCountDown", setItemCountDown);
        bus.addListener("closeCountDown", closeCountDown);
        bus.addListener("stopCountDown", stopCountDown);
        window.addEventListener("click", windowClick);
        window.addEventListener("scroll", windowScroll);
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("getConfigFinished", getConfigFinished);
            bus.removeListener("startCountDownNum", startCountDownNum);
            bus.removeListener("resetCountDownNum", resetCountDownNum);
            bus.removeListener("setItemCountDown", setItemCountDown);
            bus.removeListener("closeCountDown", closeCountDown);
            bus.removeListener("stopCountDown", stopCountDown);
            stopCountDown();
            window.removeEventListener("click", windowClick);
            window.removeEventListener("scroll", windowScroll);
        }
    }, [])
    return (
        <>
            {
                isShow ?
                    <div className="time">
                        <img draggable={false} style={{ width: '15px', height: '15px' }} src={timePng} alt="" />
                        <span>{countDownNum}</span>
                    </div>
                    : null
            }
        </>
    )
}
export default memo(CountDown)